<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2024-05-30 16:44:03
 * @LastEditTime: 2025-07-19 16:49:00
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-console -->

<template>
    <view class="c_container">
        <!-- pop {{ popShow }} -->
        <u-popup mode="center" v-model="popShow" :mask-close-able="false"
            :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.8)' }" border-radius="20" :catchtouchmove="false">
            <view class="c_content">
                <view class="tit"> <text class="strong">点击下方选择支付入网通道</text>
                    <br />
                    <!-- <text>（二选一）</text> -->
                </view>
                <view class="channels">
                    <view v-for="(channel, index) in channels" :key="index" class="channel">
                        <u-image class="icon" :src="channel.icon" @click="confirm(channel)" mode="aspectFit" width="280"
                            :height="index == 1 ? 50 : 70"></u-image>
                        <u-button type="primary" size="mini" @click="confirm(channel)">选择</u-button>
                    </view>
                </view>
            </view>

        </u-popup>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { route } from '@/utils/common';


const emit = defineEmits(['onConfirm'])

const props = withDefaults(
    defineProps<{
        isBack?: boolean
        paymentChannel?: string
        shopId?: string
        isPreview?: boolean
    }>(),
    {
        isBack: true,
        paymentChannel: '',
        shopId: '',
        isPreview: false
    }
)
const channels = ref([
    {
        name: '简约开通',
        value: 'sft1',
        icon: 'https://img0.shengpay.com/site/shengpay/images/logo.png',
        path: '/packageB/pages/paymentAccess/payInput'
    },
    {
        name: '盛付通',
        value: 'sft',
        icon: 'https://img0.shengpay.com/site/shengpay/images/logo.png',
        path: '/packageB/pages/paymentAccess/sft'
    },
    // {
    //     name: '拉卡拉',
    //     value: 'lkl',
    //     icon: 'https://www.lakala.com/storage/topic/20200904/476e4e31e53175f17e15d3055d8ab189.png',
    //     path: '/packageB/pages/paymentAccess/index'
    // }
])
const popShow = ref(true)
const open = (flag = true) => {
    popShow.value = flag
}
function handleConfirm(data: any) {
    if (!data) return
    if (props.isPreview) return // 预览不跳转，可以c_previewSubsection组件手动切换
    const { path, value, shopId } = data
    const params = {
        shopId,
        paymentChannel: value
    }
    if (props.isPreview) {
        params.isPreview = 1
    }
    route({
        url: path,
        params,
        type: 'redirect'
    })
}
const confirm = (value: any) => {
    popShow.value = false
    emit('onConfirm', [value, handleConfirm])
}
watch(() => props.paymentChannel, (val) => {
    console.log(val,'传参');
    
    if (val) {
        const channel = channels.value.find((item) => item.value === val)
        handleConfirm({
            ...channel,
            shopId: props.shopId
        })
    }
})
defineExpose({ open })
// 自动选择sft
onMounted(() => {
    console.log('自动选择sft',props.paymentChannel);
    
    if (!props.paymentChannel) {
        emit('onConfirm', [channels.value[0], handleConfirm])
    }
    if(props.paymentChannel === 'sft'){
        emit('onConfirm', [channels.value[1], handleConfirm])
    }else return  
})
</script>
  
<style lang="scss" scoped>
.c_content {
    padding: 60rpx;

    .tit {
        text-align: center;

        .strong {
            font-size: 30rpx;
            color: #000;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

    }

    .channels {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .channel {
            margin-top: 100rpx;
            padding-bottom: 30rpx;
            display: flex;
            align-items: center;
            gap: 10rpx;

            &:first-child {
                // border-bottom: 2rpx solid #999;
            }
        }
    }


}
</style>
  